<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    <meta name="viewport" content="width=device-width, initial-scale=1">-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

    <title>导航</title>
    <link rel="stylesheet" href="/dev/views/slx/css/nav.css">
<!--    <link rel="stylesheet" href="/dev/views/slx/layui/css/layui.css">-->

</head>
<body>
<div class="container-fluid">
    <div class="row">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid" style="height: 45px;">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#" style="padding: 0;">
                        <img style="width: 42px; height: 42px; border-radius: 50%;" src="/dev/views/slx/img/ioc.jpg" alt="">
                        <a href="#" class="navbar-brand" id="name">音悦</a>
                    </a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav navbar-inverse">
                        <li class="ss"><a href="/dev/views/slx/index.html">发现音乐</a></li>
                        <li class="ss"><a href="/dev/views/ccw/personalcenter.html">我的音乐</a></li>
                        <li class="ss"><a href="/dev/views/cxy/views/gedanyemian.html">歌单</a></li>
                        <li class="ss"><a href="/dev/views/czn/views/singer.html">歌手</a></li>

                        <li class="ss" style="margin-top: 9px" id="btn">
                            <div class="btn-group" onmouseover="block()" onmouseout="cancel()">
                                <button type="button" class="btn btn-link dropdown-toggle btn-primary position-relative" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false" id="bell" ></button>
                                <ul class="dropdown-menu" id="menu"></ul>
                            </div>
                        </li>
                        <li><a class="vip" ></a></li>
                        <li > <a class="phone"></a ></li>
                    </ul>
                    <form class="navbar-form navbar-right" role="search" style="margin-top: 8px; margin-right: 85px; width: 218px">
                        <div class="input-group">
                            <input  type="text"  id="songTitle_input" class="form-control" placeholder="🔍音乐/视频/用户" >
                            <span class="input-group-btn">
                                    <button style="height: 34px " value="/dev/views/slx/search.html?title=${title}" id="searchButton" class="btn btn-default" type="button" onclick="search()">
                                        <span class="glyphicon glyphicon-search"></span>
                                    </button>
                                </span>
                        </div>
                    </form>
                    <ul class=" nav navbar-nav navbar-right" id="d1" >
                        <li class="dl" ><a href="/dev/views/slx/login.html"  style="color: #787878;" >登录</a></li>
                        <li class="exit"></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
<div class="nav-bot">
</div>
<script src="/dev/plugins/jquery.min.js"></script>
<script src="/dev/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<!--<script src="/dev/views/slx/layui/layui.js" type="text/javascript"></script>-->
<script type="text/javascript">
        //可以换照片
    $(function (){
        let phone=localStorage.getItem("phone")
        console.log(phone)
        if (phone!=null) {
            $.ajax({
                url: `http://localhost:8088/dev/user/head/${phone}`,
                type: 'post',
                success(result) {
                    let arr = result.data
                    let username=arr.username;
                    let uphoto=arr.uphoto;
                    let uid=arr.uid;
                    localStorage.setItem("uid",uid);
                    localStorage.setItem("uphoto",uphoto);
                    localStorage.setItem("username",username);
                    // let name =`<a href="http://localhost:8088/dev/views/ccw/personalcenter.html" style="color: #9d9d9d;">${arr.username}</a>`

                    let bell=`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16">
  <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"/>
</svg><span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="background-color:rgb(34, 34, 34);color: white ;">
    99+
  </span>`
                    $("#bell").html(bell)
                    let vip=`<a class="vip" href="/dev/views/ccw/vip.html">VIP</a>`
                    $(".vip").html(vip)
                    let name =`<img onclick="geren()" src="${arr.uphoto}" style="height: 27px;width: 27px;border-radius: 50%; margin-top: -5px;">`
                    $(".phone").html(name)
                }
            })
        }
    })

    function geren(){
        window.location='/dev/views/ccw/personalcenter.html'
    }
    $(function (){
        let phone=localStorage.getItem("phone")

        if (phone!=null){
            $(".dl").remove()
            str=` <a href="javascript:exits(this)"  style="color: #787878;" onclick="exits()">安全退出</a>`
            $(".exit").html(str)
            // $("#btn").remove()
            // str=` <a href="javascript:exits(this)"  style="color: #787878;">安全退出</a>`
            // $(".exit").html(str)
        }
    })
    function exits() {
        localStorage.removeItem("phone")
        localStorage.removeItem('uid');
        window.location='/dev/views/slx/login.html'

    }
        // $(function () {
        //     layui.use('layer', function () {
        //         layer = layui.layer;
        //     });
        // })
    //搜索的按钮
    function search(){
        let title = $("#songTitle_input").val();
        console.log(title);
        if (title==""){
            layer.msg('不能为空哦', { icon: 5 })
        }else{
            document.location.href='/dev/views/slx/search3.html';
        }
        // document.location.href='/dev/views/slx/search.html?title='+$("#songTitle_input").val();

        var titles=localStorage.setItem("title",title);
    }
        $(function (){
            var ws;
            if("wbSocket" in window){
                let clientID=Math.ceil(Math.random()*100);
                ws=new WebSocket("ws://localhost:8088/dev/"+clientID);
                ws.onopen=function (){
                    ws.send("发送请求"+clientID);
                }
                ws.onmessage=function (evt){
                    let received_msg=evt.data
                    $("#menu").append("<p>"+received_msg+"</p>");
                }
                ws.onclose=function (){
                    console.error("连接关闭")

                }

            }else{
                $("#menu").append("<p>暂无消息</p>");
            }

        })
        //推送消息
        function block(){
            document.getElementById("menu").style="display:block";
        }

        function cancel(){
            document.getElementById("menu").style="display:none";
        }
</script>
</body>
</html>